<!doctype html>
<html class="default no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>ColorStops | @businessanalytics/customvis-lib</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
	<div class="tsd-page-toolbar">
		<div class="container">
			<div class="table-wrap">
				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
					<div class="field">
						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
						<input id="tsd-search-field" type="text" />
					</div>
					<ul class="results">
						<li class="state loading">Preparing search index...</li>
						<li class="state failure">The search index is not available</li>
					</ul>
					<a href="../index.html" class="title">@businessanalytics/customvis-lib</a>
				</div>
				<div class="table-cell" id="tsd-widgets">
					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
				</div>
			</div>
		</div>
	</div>
	<div class="tsd-page-title">
		<div class="container">
			<ul class="tsd-breadcrumb">
				<li>
					<a href="../globals.html">Globals</a>
				</li>
				<li>
					<a href="colorstops.html">ColorStops</a>
				</li>
			</ul>
			<h1>Class ColorStops</h1>
		</div>
	</div>
</header>
<div class="container container-main">
	<div class="row">
		<div class="col-8 col-content">
			<section class="tsd-panel tsd-comment">
				<div class="tsd-comment tsd-typography">
					<div class="lead">
						<p>Color stops as received by a continuous palette.</p>
					</div>
				</div>
			</section>
			<section class="tsd-panel tsd-hierarchy">
				<h3>Hierarchy</h3>
				<ul class="tsd-hierarchy">
					<li>
						<span class="target">ColorStops</span>
					</li>
				</ul>
			</section>
			<section class="tsd-panel-group tsd-index-group">
				<h2>Index</h2>
				<section class="tsd-panel tsd-index-panel">
					<div class="tsd-index-content">
						<section class="tsd-index-section ">
							<h3>Properties</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-property tsd-parent-kind-class"><a href="colorstops.html#aligned" class="tsd-kind-icon">aligned</a></li>
								<li class="tsd-kind-property tsd-parent-kind-class"><a href="colorstops.html#interpolate" class="tsd-kind-icon">interpolate</a></li>
								<li class="tsd-kind-property tsd-parent-kind-class"><a href="colorstops.html#stops" class="tsd-kind-icon">stops</a></li>
							</ul>
						</section>
						<section class="tsd-index-section ">
							<h3>Methods</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-method tsd-parent-kind-class"><a href="colorstops.html#getcolor" class="tsd-kind-icon">get<wbr>Color</a></li>
								<li class="tsd-kind-method tsd-parent-kind-class"><a href="colorstops.html#getfillcolor" class="tsd-kind-icon">get<wbr>Fill<wbr>Color</a></li>
								<li class="tsd-kind-method tsd-parent-kind-class"><a href="colorstops.html#getoutlinecolor" class="tsd-kind-icon">get<wbr>Outline<wbr>Color</a></li>
							</ul>
						</section>
					</div>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Properties</h2>
				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
					<a name="aligned" class="tsd-anchor"></a>
					<h3>aligned</h3>
					<div class="tsd-signature tsd-kind-icon">aligned<span class="tsd-signature-symbol">:</span> <a href="colorstop.html" class="tsd-signature-type">ColorStop</a><span class="tsd-signature-symbol">[]</span></div>
					<div class="tsd-comment tsd-typography">
						<div class="lead">
							<p>The list of aligned color stops in this collection. The aligned stops always
							match the data domain.</p>
						</div>
					</div>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
					<a name="interpolate" class="tsd-anchor"></a>
					<h3>interpolate</h3>
					<div class="tsd-signature tsd-kind-icon">interpolate<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
					<div class="tsd-comment tsd-typography">
						<div class="lead">
							<p>Flag to indicate whether stops should be interpolated.</p>
						</div>
					</div>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
					<a name="stops" class="tsd-anchor"></a>
					<h3>stops</h3>
					<div class="tsd-signature tsd-kind-icon">stops<span class="tsd-signature-symbol">:</span> <a href="colorstop.html" class="tsd-signature-type">ColorStop</a><span class="tsd-signature-symbol">[]</span></div>
					<div class="tsd-comment tsd-typography">
						<div class="lead">
							<p>The list of color stops in this collection.</p>
						</div>
					</div>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Methods</h2>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
					<a name="getcolor" class="tsd-anchor"></a>
					<h3>get<wbr>Color</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
						<li class="tsd-signature tsd-kind-icon">get<wbr>Color<span class="tsd-signature-symbol">(</span>_value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="color.html" class="tsd-signature-type">Color</a></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<div class="lead">
									<p>Retrieves a color given a value.</p>
								</div>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>_value: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>The value to get the color for.</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <a href="color.html" class="tsd-signature-type">Color</a></h4>
							<p>The color of the value.</p>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
					<a name="getfillcolor" class="tsd-anchor"></a>
					<h3>get<wbr>Fill<wbr>Color</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
						<li class="tsd-signature tsd-kind-icon">get<wbr>Fill<wbr>Color<span class="tsd-signature-symbol">(</span>_dp<span class="tsd-signature-symbol">: </span><a href="datapoint.html" class="tsd-signature-type">DataPoint</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<div class="lead">
									<p>Determine the fill color for a data point. The fill follows the &#39;selected&#39;
										state of a data point. If the data set has selected data points, then the
										ones that are selected get the normal color as fill color and the ones that
									are not selected get a 60% transparent color.</p>
								</div>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>_dp: <a href="datapoint.html" class="tsd-signature-type">DataPoint</a></h5>
									<div class="tsd-comment tsd-typography">
										<p>The data point to determine the color for.</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4>
							<p>The color of the data point as a string.</p>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
					<a name="getoutlinecolor" class="tsd-anchor"></a>
					<h3>get<wbr>Outline<wbr>Color</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
						<li class="tsd-signature tsd-kind-icon">get<wbr>Outline<wbr>Color<span class="tsd-signature-symbol">(</span>_dp<span class="tsd-signature-symbol">: </span><a href="datapoint.html" class="tsd-signature-type">DataPoint</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<div class="lead">
									<p>Determine the outline color for a data point. The outline color depends on
										both the &#39;highlight&#39; state and the &#39;selected&#39; state. If the point is neither
										highlighted or selected, <code>null</code> is returned to indicate that no outline needs
										to be rendered. If the point is highlighted or part of a selection, then
									the returned color is a darker version of the actual data point color.</p>
								</div>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>_dp: <a href="datapoint.html" class="tsd-signature-type">DataPoint</a></h5>
									<div class="tsd-comment tsd-typography">
										<p>The data point to determine the color for.</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span>
								<span class="tsd-signature-symbol"> | </span>
								<span class="tsd-signature-type">null</span>
							</h4>
							<p>The color of the data point as a string or null if no outline is needed.</p>
						</li>
					</ul>
				</section>
			</section>
		</div>
		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
			<nav class="tsd-navigation primary">
				<ul>
					<li class="globals  ">
						<a href="../globals.html"><em>Globals</em></a>
					</li>
				</ul>
			</nav>
			<nav class="tsd-navigation secondary menu-sticky">
				<ul class="before-current">
					<li class=" tsd-kind-enum">
						<a href="../enums/fontstyle.html" class="tsd-kind-icon">Font<wbr>Style</a>
					</li>
					<li class=" tsd-kind-enum">
						<a href="../enums/fontweight.html" class="tsd-kind-icon">Font<wbr>Weight</a>
					</li>
					<li class=" tsd-kind-enum">
						<a href="../enums/formattype.html" class="tsd-kind-icon">Format<wbr>Type</a>
					</li>
					<li class=" tsd-kind-enum">
						<a href="../enums/lengthunit.html" class="tsd-kind-icon">Length<wbr>Unit</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="catencoding.html" class="tsd-kind-icon">Cat<wbr>Encoding</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="catencodingentry.html" class="tsd-kind-icon">Cat<wbr>Encoding<wbr>Entry</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="catpalette.html" class="tsd-kind-icon">Cat<wbr>Palette</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="color.html" class="tsd-kind-icon">Color</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="colorstop.html" class="tsd-kind-icon">Color<wbr>Stop</a>
					</li>
				</ul>
				<ul class="current">
					<li class="current tsd-kind-class">
						<a href="colorstops.html" class="tsd-kind-icon">Color<wbr>Stops</a>
						<ul>
							<li class=" tsd-kind-property tsd-parent-kind-class">
								<a href="colorstops.html#aligned" class="tsd-kind-icon">aligned</a>
							</li>
							<li class=" tsd-kind-property tsd-parent-kind-class">
								<a href="colorstops.html#interpolate" class="tsd-kind-icon">interpolate</a>
							</li>
							<li class=" tsd-kind-property tsd-parent-kind-class">
								<a href="colorstops.html#stops" class="tsd-kind-icon">stops</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class">
								<a href="colorstops.html#getcolor" class="tsd-kind-icon">get<wbr>Color</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class">
								<a href="colorstops.html#getfillcolor" class="tsd-kind-icon">get<wbr>Fill<wbr>Color</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class">
								<a href="colorstops.html#getoutlinecolor" class="tsd-kind-icon">get<wbr>Outline<wbr>Color</a>
							</li>
						</ul>
					</li>
				</ul>
				<ul class="after-current">
					<li class=" tsd-kind-class">
						<a href="contencoding.html" class="tsd-kind-icon">Cont<wbr>Encoding</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="contpalette.html" class="tsd-kind-icon">Cont<wbr>Palette</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="datapoint.html" class="tsd-kind-icon">Data<wbr>Point</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="dataset.html" class="tsd-kind-icon">Data<wbr>Set</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="domain.html" class="tsd-kind-icon">Domain</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="encoding.html" class="tsd-kind-icon">Encoding</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="font.html" class="tsd-kind-icon">Font</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="length.html" class="tsd-kind-icon">Length</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="metainfo.html" class="tsd-kind-icon">Meta<wbr>Info</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="point.html" class="tsd-kind-icon">Point</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="properties.html" class="tsd-kind-icon">Properties</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="renderbase.html" class="tsd-kind-icon">Render<wbr>Base</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="renderreason.html" class="tsd-kind-icon">Render<wbr>Reason</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="segment.html" class="tsd-kind-icon">Segment</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="slot.html" class="tsd-kind-icon">Slot</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="tuple.html" class="tsd-kind-icon">Tuple</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="updateinfo.html" class="tsd-kind-icon">Update<wbr>Info</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</div>
<footer>
	<div class="container">
		<h2>Legend</h2>
		<div class="tsd-legend-group">
			<ul class="tsd-legend">
				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
				<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
				<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
				<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
				<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
				<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
				<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
				<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
				<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
				<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
			</ul>
		</div>
	</div>
</footer>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script>
</body>
</html>